<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeVal"
      shape="round"
      background="#eee"
      @input="onIpt"
      @search="onSearch"
      @cancel="onCancel"
    />
    <HistoryHot 
        v-if="blockSow==1"
        :hotKeywordList = "hotKeywordList"
        :historyKeywordList = "historyKeywordList"
        @onSearch="onSearch"
    />
    <SearchTipsList :SearchTipsList="SearchTipsList" v-else-if="blockSow==2" @onSearch="onSearch"/>
    <SearchProuduce :SearchBodyList="SearchBodyList" :filterCategory="filterCategory" v-else-if="blockSow==3" @chanCategory="chanCategory" @changePrice="changePrice" />
  </div>
</template>
<script>
import SearchProuduce from "@/components/SearchProuduce"
import SearchTipsList from "@/components/SearchTipsList"
import HistoryHot from "@/components/HistoryHot"
import { GetSearchPupopData,GetSearchInputListData,GetSearchBodyListData } from "@/request/api"
export default {
    data() {
        return {
            searchVal: "",
            placeVal: "",
            blockSow:1,
            historyKeywordList : [],
            hotKeywordList : [],
            SearchTipsList : [],
            SearchBodyList : [],
            filterCategory : [],
            order : "desc",
            sort : "id",
            categoryId : "0"
        };
    },
    created(){
        GetSearchPupopData().then(res=>{
            //   console.log(res.data);
            this.placeVal = res.data.defaultKeyword.keyword;
            this.historyKeywordList = res.data.historyKeywordList;
            this.hotKeywordList = res.data.hotKeywordList;
        })
    },
    components :{
        HistoryHot,SearchTipsList,SearchProuduce
    },
    methods: {
      changePrice(val){
        this.order = val
        this.sort = "price"
        this.onSearch(this.searchVal)
      },
      chanCategory(val){
        this.categoryId=val
        this.onSearch(this.searchVal)
      },
      onIpt(val){
        GetSearchInputListData({keyword:val}).then(res=>{
        //   console.log(res.data)
          this.SearchTipsList = res.data
          this.blockSow = 2
        })
        
    },
    onSearch(val) {
        this.blockSow = 3
        GetSearchBodyListData({
          keyword:val,
          order : this.order,
          sort : this.sort,
          categoryId:this.categoryId
          }).then(res=>{
            this.SearchBodyList = res.data.data
            // console.log(res.data);
            let newArr = JSON.parse(JSON.stringify(res.data.filterCategory).replace(/name/g,"text").replace(/id/g,"value"))
            this.filterCategory = newArr

        }).catch(err =>{
            console.log(err);
        })

    },
    onCancel() {
        this.$router.go(-1)
    }
  }
};
</script>
<style lang = "less" scoped>
.search-popup {
  width: 100%;
  min-height: 100%;
  background-color: #efefef;
  position: absolute;
  /* left: 0; */
  top: 0;
}
</style>